<template>
    <!-- 1.循环数组/集合 -->
    <ul>
        <li v-for="hobby in hobbies">{{ hobby }}</li>
    </ul>
    <!-- 2.循环对象属性 -->
    <ul>
        <li v-for="value in emp">{{ value }}</li>
    </ul>
    <!-- 3.循环对象数组/集合 -->
     <table border="1">
        <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>密码</th>
        </tr>
        <tr v-for="user in users">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
        </tr>
     </table>
     <!-- 4.循环数字 for(int i = 1; i <= num; i++) -->
      <ul>
        <li v-for="i in num">{{ i }}</li>
      </ul>
</template>
<script setup>
import { reactive, ref } from 'vue';

const hobbies = ref(['吃饭', '睡觉', '打豆豆'])
const emp = reactive({ id: 1, name: "admin", salary: 8000 })
const users = ref([{
    id: 1,
    username: "admin",
    password: "111111"
}, {
    id: 2,
    username: "jack",
    password: "222222"
}, {
    id: 3,
    username: "tom",
    password: "333333"
}])
const num = 10
</script>